import React, {useEffect, useState, useRef} from 'react';
import {
  View,
  Text,
  ScrollView,
  useWindowDimensions,
  useColorScheme,
} from 'react-native';

export default props => {
  const {name, age, level, sex} = props;
  const {address, setAddress} = useState('江苏省南京市');
  // 监听
  useEffect(() => {
    console.log('首次进入加载界面！');
    setTimeout(() => {
      setAddress('广东省深圳市');
      scrollViewRef.current.scrollToEnd({
        animted: true,
      });
    }, 2000);
  }, []);
  useEffect(() => {
    console.log('地址发生改变！');
  }, [address]);

  const scrollViewRef = useRef(null);
  const {width, height} = useWindowDimensions();
  const isDarkMode = useColorScheme() === 'dark';

  const renderProps = () => {
    return (
      <Text>{`name=${name}，age=${age}，level=${level}，sex=${sex}`}</Text>
    );
  };

  const renderAddress = () => {
    return <Text>{address}</Text>;
  };

  return (
    <View style={{width: 200, height: 200, backgroundColor: 'blue'}}>
      {renderProps()}
      {renderAddress()}
      <ScrollView ref={scrollViewRef}>
        <Text>AAAA</Text>
        <Text>AAAA</Text>
        <Text>AAAA</Text>
        <Text>AAAA</Text>
        <Text>AAAA</Text>
        <Text>AAAA</Text>
      </ScrollView>
    </View>
  );
};

// export default FunctionView;
